<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="favicon.ico">

    <title>H+</title>
    <meta name="keywords" content="H+">
    <meta name="description" content="H+">

    <link href="__CSS__/bootstrap.min.css" rel="stylesheet">
    <link href="__CSS__/font-awesome.min.css" rel="stylesheet">
    <link href="__CSS__/plugins/dataTables/dataTables.bootstrap.css" rel="stylesheet">
    <link href="__CSS__/animate.min.css" rel="stylesheet">
    <link href="__CSS__/style.min.css" rel="stylesheet">
</head>
<body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>基本 <small>分类，查找</small></h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="dropdown-toggle" data-toggle="dropdown" href="table_data_tables.html#">
                                <i class="fa fa-wrench"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-user">
                                <li><a href="table_data_tables.html#">选项1</a>
                                </li>
                                <li><a href="table_data_tables.html#">选项2</a>
                                </li>
                            </ul>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <table class="table table-striped table-bordered table-hover dataTables-example">
                            <thead>
                                <tr>
                                	<th><input class="check-all" type="checkbox"/></th>
                                	{volist name="keyList" id="field"}
										<th>{$field.title|htmlspecialchars}</th>
									{/volist}
                                </tr>
                            </thead>
                            <tbody>
                            	{volist name="data" id="vo"}
								    <tr class="gradeX">
										<td><input class="ids" type="checkbox" value="{$e['id']}" name="ids[]"></td>
										{volist name="keyList" id="field"}
											<td style="width: auto; max-width: {$field['width']};" class="text-ellipsis" <eq name="field.opt" value="tooltip">data-title="{$e[$field['name']]}" data-role="watch"</eq>>{$e[$field['name']]}</td>
										{/volist}
	                                </tr>
                            	{/volist}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="__JS__/jquery.min.js"></script>
    <script src="__JS__/bootstrap.min.js"></script>
    <script src="__JS__/plugins/jeditable/jquery.jeditable.js"></script>
    <script src="__JS__/plugins/dataTables/jquery.dataTables.js"></script>
    <script src="__JS__/plugins/dataTables/dataTables.bootstrap.js"></script>
    <script src="__JS__/content.min.js"></script>
    <script>
        $(document).ready(function(){$(".dataTables-example").dataTable();var oTable=$("#editable").dataTable();oTable.$("td").editable("http://www.zi-han.net/theme/example_ajax.php",{"callback":function(sValue,y){var aPos=oTable.fnGetPosition(this);oTable.fnUpdate(sValue,aPos[0],aPos[1])},"submitdata":function(value,settings){return{"row_id":this.parentNode.getAttribute("id"),"column":oTable.fnGetPosition(this)[2]}},"width":"90%","height":"100%"})});function fnClickAddRow(){$("#editable").dataTable().fnAddData(["Custom row","New row","New row","New row","New row"])};
    </script>
</body>
</html>